<template>
  <top-bar type="error"/>
  <section class="container">
    <div class="clothing-box">
      <div class="top-filter-box">
        <div class="content-box">
          <div class="top-filter-left flex">
            <div>全部服装</div>
            <div>（168）</div>
          </div>
          <div class="top-filter-right flex">
            <div class="item-one flex">
              <div class="front">隐藏筛选条件</div>
              <div class="icon">
                <svg-icon name="filterIcon"/>
              </div>
            </div>
            <div class="item-two flex">
              <div class="front">
                排序依据
              </div>
              <div class="icon" @click="clothingTemp.sortIsDisplay()">
                <svg-icon name="seasonUp" v-if="clothingTemp.sortIsShow"/>
                <svg-icon name="sortDown" v-else/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-container">
        <!--   左侧内容   -->
        <div class="left-side">
          <!--   全部服装    -->
          <div class="all-clothing">
            <div class="clothing-item">女装</div>
            <div class="clothing-item">男装</div>
            <div class="clothing-item">家纺</div>
            <div class="clothing-item">内衣</div>
            <div class="clothing-item">饰品</div>
            <div class="clothing-item">运动服</div>
          </div>
          <hr class="hr-style"/>
          <!--   季节筛选     -->
          <div class="season-filter">
            <div class="season-title flex flex-js-b">
              <div>季节筛选</div>
              <div class="icon" @click="clothingTemp.isDisplay()">
                  <svg-icon name="seasonUp" v-if="clothingTemp.isShow"/>
                  <svg-icon name="sortDown" v-else/>
              </div>
            </div>
            <form v-show="clothingTemp.isShow">
              <div class="season-item">
                <input type="radio" name="春季" id="spring">
                <label for="spring">春季</label>
              </div>
              <div class="season-item">
                <input type="radio" name="春季" id="summer">
                <label for="summer">夏季</label>
              </div>
              <div class="season-item">
                <input type="radio" name="春季" id="autumn">
                <label for="autumn">秋季</label>
              </div>
              <div class="season-item">
                <input type="radio" name="春季" id="winter">
                <label for="winter">冬季</label>
              </div>
            </form>
          </div>
          <hr class="hr-style"/>
          <!--   样式筛选     -->
          <div class="style-filter">
            <div class="style-title flex flex-js-b">
              <div>样式筛选</div>
              <div class="icon" @click="clothingTemp.styleIsDisplay()">
                <svg-icon name="sortDown" v-if="clothingTemp.StyleIsShow"/>
                <svg-icon name="seasonUp" v-else/>
              </div>
            </div>
          </div>
          <hr class="hr-style"/>
        </div>
        <!--   右侧内容   -->
        <div class="right-side">
          <div class="right-img-text">
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one position-relative"
                 style="height: 100%;width: 100%;font-size: 30px"
                 v-permissionCover="['1','2', '3']"
            >
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
            <div class="item-one">
              <div class="img-box">
                <img src="../../assets/images/clothing-one.png" alt="">
              </div>
              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent,reactive } from 'vue';
import { getApp } from '@/common/hooks';
import  Messages from '@/components/Warm/Messages/index.vue';
import { Language } from '@/common/lang';
import Layout from "@/layout/index.vue";
import TopBar from "@/components/TopBar/index.vue"

export default defineComponent({
  name: "clothing",
  components: {
    Layout,
    TopBar
  },
  data() {
    return {

    }
  },
  setup() {
    const { proxy } = getApp(["Vm"]).Vm;
    const clothingTemp = reactive({
      isShow: true,
      StyleIsShow: true,
      sortIsShow: true,
      isDisplay: function () {
        clothingTemp.isShow = !clothingTemp.isShow
      },
      styleIsDisplay: function () {
        clothingTemp.StyleIsShow = !clothingTemp.StyleIsShow
      },
      sortIsDisplay: function () {
        clothingTemp.sortIsShow = !clothingTemp.sortIsShow
      }
    })
    const handle = () => {
      Messages({});
    }

    const C = () => {
      proxy.$i18n.locale = Language.xiaomaoen;
    }

    const zw = () => {
      proxy.$i18n.locale = Language.xiaomao;
    }

    return {
      handle,
      C,
      zw,
      clothingTemp
    }
  }
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin-bottom: 100Px;
  .clothing-box {
    .top-filter-box {
      width: 100%;
      height: 104Px;
      .content-box {
        display: flex;
        justify-content: space-between;
        height: 24Px;
        padding: 50Px 50Px 30Px 50Px;
        .top-filter-left {
          width: 203Px;
          height: 26Px;
          color: #222;
          font-size: 26Px;
          font-style: normal;
          font-weight: 400;
          line-height: 24Px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .top-filter-right {
          color: #222;
          font-size: 18Px;
          font-style: normal;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          .item-one {
            margin-right: 30Px;
            .front {
              margin-right: 9Px;
            }
          }
          .item-two {
            .front {
              margin-right: 9Px;
            }
          }
        }
      }
    }
    .center-container {
      display: flex;
      justify-content: space-between;
      margin: 0 50Px;
      .left-side {
        flex: 0 1 203Px;
        display: flex;
        flex-direction: column;
        min-height: 76vh;
        .all-clothing {
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
          .clothing-item {
            width: 100%;
            height: 24Px;
            margin-bottom: 10Px;
            line-height: 24Px;
            &:hover {
              cursor: pointer;
            }
          }
        }
        .hr-style{
          display: block;
          width: 188Px;
          float: left;
          margin: 20Px 0 ;
          border: 1px solid #DFDFDF;
        }
        .season-filter {
          width: 100%;
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
          .season-title {
            width: 100%;
            height: 24Px;
            line-height: 24Px;
            margin-bottom: 16Px;
            .icon {
              &:hover {
                cursor: pointer;
              }
            }
          }
          .season-item {
            width: 100%;
            margin-bottom: 10Px;
            padding: 4Px 0;
            input[type="radio"] {
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              border-radius: 0; /* 设置边框半径为0，使其变为正方形 */
              width: 16Px; /* 设置宽度 */
              height: 16Px; /* 设置高度 */
              border: 1Px solid #000; /* 添加边框 */
              margin-right: 15Px;
            }

            /* 添加选中状态的样式，例如改变背景颜色 */
            input[type="radio"]:checked {
              background-color: rgb(56,56,56); /* 选中时的背景颜色 */
              background-image: url("../../assets/images/select.png");
              background-size: contain; /* 调整背景图像的尺寸，保持比例 */
              background-position: center center; /* 将背景图像居中展示 */
              background-repeat: no-repeat; /* 不重复 */
            }
          }
        }
        .style-filter {
          width: 100%;
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
          .style-title {
            .icon {
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      .right-side {
        flex: 1;
        margin-left: 30Px;
        .right-img-text {
          display: grid;
          grid-column-gap: 30Px;
          grid-row-gap: 30Px;
          grid-template-columns: repeat(4, 377Px);
          .item-one {
            width: 100%;
            .img-box {
              width: 100%;
              max-height: 520Px;
              margin-bottom: 30Px;
              img {
                max-width: 100%;
                height: 100%;
                &:hover {
                  cursor: pointer;
                }
              }
            }
            .front-box {
              width: 100%;
              height: 24Px;
              line-height: 24Px;
              color: #222;
              font-size: 16Px;
              font-style: normal;
              font-weight: 400;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>